<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="java.util.Date"%>
<%@page import="br.com.trabalho.entidades.Comentario"%>
<%@page import="br.com.trabalho.entidades.Usuario"%>
<%@page import="java.util.List"%>
<%@page import="br.com.trabalho.entidades.Receita"%>
<%@page import="br.com.trabalho.util.Util"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/star-rating.min.css" rel="stylesheet">
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/star-rating.min.js"></script>
        <script src="js/funcoes.js"></script>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta property="og:site_name" content="Portal de Receitas"/>
	<meta property="og:locale" content="pt_BR"/>
        <meta property="og:title" content="Receita " />
        <meta property="og:url" content="http://www.sitedereceitas.com.br/details.jsp?idReceita=X" />
        <meta property="og:description" content="Detalhes da receita deliciosa" />
        <meta property="og:image" content="receita.jpg" />
        <meta property="og:type" content="Recipe" />
        <title>Detalhes da Receita</title>
        <style>
            .panel-heading{
                text-align: center;
            }
            .largura150{
                width: 150px;
            }
            .comentario{
                border: 1px solid black;
            }
            .comentario h4 {
                text-align: center;
            }
            .comentario p{
                padding-left: 10px;
            }
            
            .foto_container{
                margin-bottom: 1px;
                margin-top: 1px;
            }
            
            .foto{
                height: 100px;
                width: auto;
                background-size: cover;
                background-image: url('receita.jpg');
            }
        </style>
        <script type="text/javascript">
            
        </script>
    </head>
    <body>
        <jsp:useBean class="br.com.trabalho.entidades.Receita" scope="session" id="DETALHES"></jsp:useBean>
        <%@ include file="template.jsp" %>
        <div class="container">
            <div class="col-sm-12 col-md-8 col-lg-8 col-8">
                <div class="panel panel-primary" itemscope itemtype="http://schema.org/Recipe">
                    <div class="panel-heading">
                        <span id="nomeReceita" itemprop="name">${DETALHES.nome}</span>
                    </div>
                    <div class="panel-body">
                        <table class="table" style="margin-bottom: 0">
                            <tbody>
                                <tr>
                                    <td class="largura150">
                                        <b>Categoria</b>
                                    </td>
                                    <td>
                                        <span id="categoria" itemprop="recipeCategory">${DETALHES.categoria}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="largura150">
                                        <b>Breve Descrição</b>
                                    </td>
                                    <td>
                                        <span id="descricao" itemprop="description">${DETALHES.descricao}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="largura150">
                                        <b>Valor Nutricional</b>
                                    </td>
                                    <td>
                                        <span id="valorNutricional" itemprop="nutrition">${DETALHES.valorNutricional}</span>
                                    </td>
                                </tr>
                                <c:forEach var="i" items="${DETALHES.ingredientes}" varStatus="status">
                                    <tr>
                                        <td>
                                            <b>${status.count}º Ingrediente</b>
                                        </td>
                                        <td>
                                            <span class="quantidade">${i.quantidade}</span> <span class="unidade">${i.unidade}</span> de <span class="nomeIngrediente" itemprop="ingredients">${i.nome}</span>
                                        </td>
                                    </tr>
                                </c:forEach>
                                <tr>
                                    <td class="largura150">
                                        <b>Tempo de Preparo</b>
                                    </td>
                                    <td>
                                        <span id="tempoPreparo" itemprop="prepTime">${DETALHES.tempo}</span> Minutos 
                                    </td>
                                </tr>
                                <tr>
                                    <td class="largura150">
                                        <b>Modo de Preparo</b>
                                    </td>
                                    <td>
                                        <span id="preparo" itemprop="recipeInstructions">${DETALHES.preparacao}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="largura150">
                                        <b>Modo de Servir</b>
                                    </td>
                                    <td>
                                        <span id="servir" itemprop="">${DETALHES.modoDeServir}</span><!-- Não encontrada na descrição da microdata -->
                                    </td>
                                </tr>
                                <tr>
                                    <td class="largura150">
                                        <b>Cozimento</b>
                                    </td>
                                    <td>
                                        <span id="cozimento" itemprop="cookingMethod">${DETALHES.metodoCozimento}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="largura150">
                                        <b>Porções</b>
                                    </td>
                                    <td>
                                        <span id="porcoes" itemprop="recipeYield">${DETALHES.porcoes}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="largura150">
                                        <b>Média Notas Atribuídas</b>
                                    </td>
                                    <td>
                                        <input value='${DETALHES.media}' type="number" class="rating" min=0 max=5 step=1 data-size="sm" disabled/> 
                                    </td>
                                </tr>
                                <c:if test="${USUARIO != null}">
                                    <tr>
                                        <td class="largura150" style="vertical-align: middle;">
                                            <b>Sua Avaliação</b>
                                        </td>
                                        <td>
                                            <form method="POST" action="details" id="avaliacao">
                                                <input value="${sessionScope.MINHA_AVAL}" name="avaliacao" type="number" class="rating" min=0 max=5 step=1 data-size="sm" 
                                                       onchange="document.getElementById('avaliacao').submit();"/>
                                                <input type="hidden" name="id" value="${DETALHES.id}"/>
                                            </form>
                                        </td>
                                    </tr>
                                </c:if>
                                <tr>
                                    <td>
                                        <b>Autor</b>
                                    </td>
                                    <td>
                                        <span id="autor" itemprop="author">${DETALHES.autor.nome}</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>                                       
            <div class="col-sm-12 col-md-4 col-lg-4 col-4">
                <a class="btn btn-success" href="javascript:void(0);" onclick="showRecipeXml();">Exportar Receita</a>
            </div>
            <div class="col-sm-12 col-md-8 col-lg-8 col-8">
                <div class="col-sm-3 col-md-3 foto_container">
                    <a href="receita.jpg"><div class="foto"></div></a>
                </div>
                <div class="col-sm-3 col-md-3 foto_container">
                    <a href="receita.jpg"><div class="foto"></div></a>
                </div>
                <div class="col-sm-3 col-md-3 foto_container">
                    <a href="receita.jpg"><div class="foto"></div></a>
                </div>
                <div class="col-sm-3 col-md-3 foto_container">
                    <a href="receita.jpg"><div class="foto"></div></a>
                </div>
            </div> 
            <div class="col-sm-12 col-md-8 col-lg-8 col-8">
                <section>
                    <header>
                        <h1>Comentários</h1>
                    </header>
                    <div id="comentarios">
                        <c:forEach var="c" items="${DETALHES.comentarios}">
                            <div class="comentario">
                                <h4>Comentario(Data: ${c.dataComentario} Autor: <c:out value="${c.autor.nome}"/></h4>
                                <p><c:out value="${c.comentario}"/></p><br/>
                            </div>
                        </c:forEach>
                    </div>
                    <c:if test="${USUARIO != null}">
                        <form action="details" method="POST" onsubmit="return validaComentario(this)">
                            <textarea name="text_comentario" style="width: 100%"></textarea>
                            <input value="Enviar Comentario" type="submit" class="btn btn-sm btn-primary"/>
                            <input type="hidden" name="comentario" value="true"/>
                            <input type="hidden" name="id" value="${DETALHES.id}"/>
                        </form>
                    </c:if>
                </section>
            </div>
        </div>
        <div style="clear: both"></div>
        <footer style="text-align: center;">
            <%@ include file="footer.jsp" %>
        </footer>
    </body>
</html>
